<template>
  <div class="app-container home">
    <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="item in img" :key="img.id">
        <h3 class="medium"><img :src="item.url" alt="图片" width="729.22px" height="375px"></h3>
      </el-carousel-item>
    </el-carousel>
    <div style="display: flex">
      <div ref="chart" style="width:50%;height:376px;display: flex;"></div>
      <div ref="chart1" style="width:50%;height:376px;display: flex;"></div>
    </div>

  </div>
</template>

<script>
import { getListBing ,echartList,selectSrName,getMax} from '@/api/eamp/email_write'

export default {
  name: 'Index',
  data() {
    return {
      queryParamer: {
        delFlg: 0,
        connection: 2
      },
      srName:[],
      data: [],
      max:null,
      a:[],
      b:[],
      c:[],
      img: [
        { id: 1, url: require('..\\assets\\images\\pic11.jpg') },
        { id: 2, url: require('..\\assets\\images\\pic8.jpg') },
        { id: 3, url: require('..\\assets\\images\\pic7.jpg') },
        { id: 4, url: require('..\\assets\\images\\pic10.jpg') },
        { id: 5, url: require('..\\assets\\images\\pic9.jpg') }
      ],
      // 版本号
      version: '3.8.8'
    }
  },
  mounted() {
    this.getEchartData()
    this.getEchartData1()
  },
  methods: {
    getSrName(){
      selectSrName().then(response => {
        this.srName=response.rows;
      })
    },
    getBing() {
      getListBing(this.queryParamer).then(response => {
        this.data = response.rows;
        console.log(this.data)
        this.getEchartData()
      })
    },
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '事项总数',
              type: 'pie',
              radius: ['45%', '75%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.data,
              color: ['#3AA0FF', '#36CBCB', '#4DCB73', '#FAD337', '#F2637B', '#975FE4']
            }
            ]
        };
        myChart.setOption(option)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function() {
          myChart.resize()
        })
      })
    },
    getEchartData1() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option =
          {
            legend: {
              // 需要跟series中的name对应否则不显示.
              data: this.srName,
              textStyle: {
                fontSize: 10, // 设置文字大小
                color: "#718ca2", // 文字颜色
                borderRadius: 6 // 色块的圆角
              },
              // align: 'left', // 会控制文字跟色块的对齐
              left: 'right', // 调整整体在图表中的对其方式
              itemWidth: 10,  // 设置色块宽度
              itemHeight: 10, // 设置色块高度
            },

            xAxis: {
              data: this.srName,
              axisLabel: {
                interval: 0, // 如果底部文字长自动改变长度显示全文字.
                color: "#718ca2",
                fontSize: 10,
              },
              // 设置底部坐标线的样式
              axisLine: {
                lineStyle: {
                  color: '#718ca2' // 设置底部坐标线的颜色
                }
              },
            },
            // 整体图表的位置调整, 如果不设置有可能会显示的比较小, 反而设置了才会正常.
            grid: {
              left: 30,   // 左边距
              right: 6,  // 右边距
              top: 30,    // 上边距
              bottom: 20  // 下边距
            },
            // 左侧数值 and 右侧数值
            yAxis: [

              { // 左侧数值
                type: 'value',
                // 控制左侧数值的样式
                axisLabel: {
                  fontSize: 10,
                  fontFamily: "Bebas",
                  color: "#718ca2",
                },
                // 柱状图左侧显示的最小单位
                min: 0,
                // 柱状图中左侧显示的最大单位
                max: this.max,
                interval: 1,
                // 改变柱状图横线的颜色
                splitLine: {
                  interval: 5, // 控制分割线的密度 数值隔1出现一条, 可以调整
                  lineStyle: {
                    color: ['#253458'], // 改变横线的颜色
                    width: 1,
                    type: 'solid',
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: '#718ca2' // 设置底部坐标线的颜色
                  }
                },
              }
            ],
            // 主要数据
            series: [{
              name: '未试验',
              type: 'bar',
              data:  this.a,
              itemStyle: {
                color: '#253458', // 改变柱子的颜色
                borderRadius: 4,  // 设置柱子的圆角大小 单独这样设置四个角全部会发生圆角变化
                normal: {
                  barBorderRadius: [4, 4, 0, 0]  // 柱子的圆角，分别为左上、右上、右下、左下
                },
                emphasis: {
                  // 高亮样式配置
                }
              },
              // 设置柱子上显示数据
              label: {
                  show: true,  // 显示数据标签
                  position: 'top',  // 数据标签显示在柱子的顶部
                  fontSize: '10',
                  formatter: '{a}', // 格式化柱子上的文字 {c} 是规定的, + 你自定义文字
                  color: '#5470c6'
              },
            },
              {
                name: '试验中',
                type: 'bar',
                data:  this.b,
                itemStyle: {
                  color: '#253458', // 改变柱子的颜色
                  normal: {
                    barBorderRadius: [4, 4, 0, 0]  // 柱子的圆角，分别为左上、右上、右下、左下
                  },
                },
                label: {
                  show: true,  // 显示数据标签
                  position: 'top',  // 数据标签显示在柱子的顶部
                  fontSize: '10',
                  formatter: '{a}', // 格式化柱子上的文字 {c} 是规定的, + 你自定义文字
                  color: '#5470c6'
                },
              },
              {
                name: '已试验',
                type: 'bar',
                data: this.c,
                itemStyle: {
                  color: '#253458', // 改变柱子的颜色
                  normal: {
                    barBorderRadius: [4, 4, 0, 0]  // 柱子的圆角，分别为左上、右上、右下、左下
                  },
                },
                label: {
                  show: true,  // 显示数据标签
                  position: 'top',  // 数据标签显示在柱子的顶部
                  fontSize: '10',
                  formatter: '{a}', // 格式化柱子上的文字 {c} 是规定的, + 你自定义文字
                  color: '#5470c6'
                },
              }
              ]
          };

        myChart.setOption(option, true)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function() {
          myChart.resize()
        })
      })
    },
    getMax(){
      getMax().then(res =>{
        this.max = res.data+1;
      })
    },
    getZhuList(){
      this.getSrName();
      this.getMax();
      echartList().then(res => {
        this.a=res.rows[0];
        this.b=res.rows[1];
        this.c=res.rows[2];
        this.getEchartData1()
      })

    }
  },
  watch: {},
  created() {
    this.getBing();
    this.getZhuList();
    this.getMax();
  }
}
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>


